<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生产可视化</title>

  <link rel="stylesheet" href="./bootstrap-4.3.1/css/bootstrap.min.css">

  <link rel="stylesheet" type="text/css" href="./dhtmlxList/codebase/dhtmlxlist_skyblue.css">

  <script src="./js/echarts.js"></script>
  <script src="./dhtmlxList/codebase/dhtmlxlist.js"></script>
  <script language="JavaScript" src="./jquery/jquery-3.3.1.min.js"></script>

  <script type="text/javascript">
    var d  = new Date();

    console.log(d.toTimeString('hh:mm'));
  </script>

  <script type="text/javascript">
    Date.prototype.format = function(fmt) {
       var o = {
          "M+" : this.getMonth()+1,                 //月份
          "d+" : this.getDate(),                    //日
          "h+" : this.getHours(),                   //小时
          "m+" : this.getMinutes(),                 //分
          "s+" : this.getSeconds(),                 //秒
          "q+" : Math.floor((this.getMonth()+3)/3), //季度
          "S"  : this.getMilliseconds()             //毫秒
      };
      if(/(y+)/.test(fmt)) {
              fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
      }
       for(var k in o) {
          if(new RegExp("("+ k +")").test(fmt)){
               fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
           }
       }
      return fmt;
  }
  </script>


  <script>
    var   myList;
    function doOnLoad(){
      var projectList  = new dhtmlXList({
        container:"proj_list",
        select:true,
        type:{
          template:"#ID# --- #Name#",
          height:40
        }
      });

      projectList.add(
        {
          ID: 2019040301,
          Name:"上海帛衡急救盒",
          Leader:"彭万里"
        }
      );

      projectList.add(
        {
          ID:2019040302,
          Name:"天津云箭导弹底座",
          Leader:"张广才"
        }
      );

      projectList.add(
        {
          ID:2019040501,
            Name:"上海点创连杆",
            Leader:"于学忠"
        }
      );
      projectList.add(
        {
          ID:2019040502,
          Name:"南京泰通三防手机",
          Leader:"彭万里"
        }
      );
      projectList.add(
        {
          ID:2019040503,
          Name:"苏州乐听眼镜下盖",
          Leader:"彭万里"
        }
      );
      projectList.add(
        {
          ID:2019041201,
          Name:"天津晨星外壳",
          Leader:"张广才"
        }
      );

      var machineList  =  new dhtmlXList({
          container:"dev_list",
          select:true,
          type:{
            template:"#Name#",
            height:40
          }
        });

        machineList.add(
          {
            Name:"打孔机1号"
          }
        );

        machineList.add(
          {
            Name:"打孔机2号"
          }
        );

        machineList.add(
          {
            Name:"磨床1号"
          }
        );
        machineList.add(
          {
            Name:"磨床2号"
          }
        );

        machineList.add(
          {
            Name:"加工中心1号"
          }
        );


        machineList.add(
          {
            Name:"铣床1号"
          }
        );


      machineList.select(machineList.first());

      projectList.select(projectList.first());
    }
  </script>
</head>


<body onload="doOnLoad();">

<div style="width: 1720px; height: 1024px">
    <!-- Left area -->
  <div style="float: left; margin: 0; width: 90%; height: 1024px">

    <!-- 第一行：指标显示 -->
    <div style="background-color: rgb(238,238,238);width: 100%; height: 294px; margin: 0">

      <!-- 指标走势折线图 -->
      <div id="zbzs_block" style="float: left; width: 25%; height: 294px;"></div>

      <!-- 三大指标饼图 -->
      <div style="float: right; width: 75%; height: 294px">
        <div id='tj_pie' style="height: 294px; width: 100%"></div>
  <!--       <div id='wb_calendar' style="height: 180px; width: 100%"></div> -->
      </div>

    </div>

    <!-- 第二行：计划进度+成本分析 -->
    <div style=" width: 100%; height: 355px; margin: 0; background-color: #F5F5F5;  box-shadow: 5px 10px 40px #888888; margin-top: 5px">
      <!-- 左下项目列表 -->
      <div id="proj_list" style="float: left; width: 15%; height: 355px; ">

      </div>

      <!-- 计划&进度 -->
      <div id='pc_block' style="float: left;width: 35%; height: 355px">

      </div>

      <!-- 成本柱状图 -->
      <div id='cost_bar' style="float: left; width: 30%; height: 355px;">

      </div>

      <!-- 成本损耗占比 -->
      <div id="cost_pie" style="float: left; width: 20%; height: 355px">

      </div>

    </div>

    <!-- 第三行：单台机床信息 -->
    <div style=" width: 100%; height: 360px; margin: 0; background-color: #F5F5F5; margin-top: 10px;">
      <div id="dev_list" style="float: left; width: 15%; height: 350px; padding-right: 5px;"></div>

      <!-- 机床信息框 -->
      <div style="float: left; width: 15%;height: 340px; margin-bottom: 20px; padding: 5px;  box-shadow: 5px 10px 10px #888888; ">
              <!-- 稼动率 -->
        <div style="display: inline-block; height: 120px; width: 100%; text-align: center;">
          <p style="font-size: 16px"> 稼动率 </p>
          <p style="margin: 0; font-size: 40px; color: #e79b37"> 60% </p>
        </div>

        <div style="width: 100%; height: 280px;">
          <div style="display: block;">
            <p style="margin-left: 10px; font-size: 28px;">工况信息:</p>
          </div>

          <div style="display: block; width: 100%; height: 40px; ">
            <p style="float: left; width: 35%;height: 40px;  margin:0; margin-left:10px; font-size: 20px; color:#00CD66">作业中</p>
            <p id='work_time' style="float: left; width: 25%; margin:0; padding-left:5px; font-size: 20px; color: #e79b37;">0 </p>
          </div>

          <div style="display: block; width: 100%; height: 32px;">
            <p style="float: left; margin:0; margin-left: 10px; width: 60px;  font-size: 14px;"> 当前任务 </p>
            <p style="float: left; margin:0; margin-left: 20px; font-size: 14px;color: #e79b37;">苏州乐听眼镜下盖</p>
          </div>

          <div style="display: block; height: 32px;">
            <p style="float: left; margin:0; margin-left: 10px; width: 60px; font-size: 14px;"> 下一任务 </p>
            <p style="float: left; margin:0; margin-left: 20px; font-size: 14px; color: #e79b37; ">天津晨星外壳</p>
          </div>
        </div>
      </div>
      <!-- 机床信息框End -->


      <div style="float: left; width: 70%; height: 350px;">
        <div id='event_line' style="width: 100%; height: 170px;">

        </div>

        <div id='time_cost' style="width: 100%; height: 180px">

        </div>
      </div>
    </div>
  </div>

   <!-- Right area -->
  <div id='wb_calendar' style="float: right; margin: 0; width: 10%; height: 1024px">

  </div>

</div>


<script type="text/javascript">

  var labelTop = {
    normal : {
      label : {
        show : true,
        position : 'center',
        formatter : '{b}',
        textStyle: {
          baseline : 'top'
        }
      },
      // labelLine : {
      //   show : true
      // }
    }
  };
  var labelFromatter = {
    normal : {
      label : {
        formatter : function (params){
          return 100 - params.value + '%'
        },
        textStyle: {
          baseline : 'top'
        }
      }
    },
  }
  var labelBottom = {
    normal : {
      color: '#ccc',
      label : {
        show : true,
        color:'#FF8247',
        position : 'center'
      },
      labelLine : {
        show : false
      }
    },
    emphasis: {
      color: 'rgba(0,0,0,0)'
    }
  };

  var radius = [65, 80];

  var myChart = echarts.init(document.getElementById('tj_pie'));
  option = {
    legend: {
      x : 'center',
      bottom : '5%',
      data:[
       ,'开工率','故障率','生产达标率',
      ]
    },
    title : {
      text: '指标统计',

      x: 'center',
    },

    toolbox: {
      show : true,

    },
    series : [
      {
        type : 'pie',
        center : ['20%', '50%'],
        radius : radius,
        itemStyle : labelFromatter,
        data : [
          {name:'other', value:56, itemStyle : labelBottom},
          {name:'开工率', value:44, itemStyle : labelTop}
        ]
      },
      {
        type : 'pie',
        center : ['50%', '50%'],
        radius : radius,
        x:'40%', // for funnel
        itemStyle : labelFromatter,
        data : [
          {name:'other', value:75, itemStyle : labelBottom},
          {name:'故障率', value:25,itemStyle : labelTop}
        ]
      },
      {
        type : 'pie',
        center : ['80%', '50%'],
        radius : radius,
        x:'60%', // for funnel
        itemStyle : labelFromatter,
        data : [
          {name:'other', value:28, itemStyle : labelBottom},
          {name:'生产达标率', value:72,itemStyle : labelTop}
        ]
      },
    ]
  };
  myChart.setOption(option);
</script >

<!-- 维保计划 -->
<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('wb_calendar'));



  var graphData = [
    {
      name:'主轴润滑',
      value: Date.UTC(2019, 0, 3, 9, 0, 0, 0)
    },
    {
      name:'配电箱维保',
      value:Date.UTC(2019, 2, 5, 9, 0, 0, 0)
    },
    {
      name:'刀具清洗',
      value:Date.UTC(2019, 3, 17, 9, 0, 0, 0)
    },
  ];


  var links = graphData.map(function (item, idx) {
      return {
          source: idx,
          target: idx + 1
      };
  });
  links.pop();

  var option  = {
    // title:{
    //   text:'维保日历',
    //   x:'center',
    // },



    tooltip:{
        position: 'top',
        formatter: '{a}-{b}'
    },

    visualMap: [{
      show:false,
        min: 0,
        max: 10000,
        calculable: true,
        seriesIndex: [0],
        orient: 'horizontal',
        top:'10%',
        left: '40%',
        bottom: 20
    }],

    calendar: [
    {
      left:40 ,
      top:'5%',
      orient: 'vertical',
      bottom:5,
      monthLabel: {
          nameMap: 'cn',
          margin: 5
      },
      dayLabel: {
          firstDay: 1,
          nameMap: 'cn'
      },
      cellSize: 15,
      range: '2019'
    }],

    series: [{
        name:'维保计划',
        type: 'graph',
        edgeSymbol: ['none', 'arrow'],
        coordinateSystem: 'calendar',
        links: links,
        symbolSize: 10,
        calendarIndex: 0,
        label:{
          normal:{
            show:true,
            color:'#000',
            offset:[20, 12]
          },
        },
        data: graphData
    }]

  };

  myChart.setOption(option);
</script>



<script type="text/javascript">

  var myCharts = echarts.init(document.getElementById('pc_block'));
  var option = {
    title: {
        text: '计划&进度',
        left: 10
    },
    legend: {
        y: 'bottom',
        data: ['计划时间', '实际时间']  //修改的地方1

    },
    grid: {
        containLabel: true,
        left: 20
    },
    xAxis: {
        type: 'time'
    },

    yAxis: {
        data: ['打孔', '精加工', '电火花', '试模', '配模']
    },
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            var res = params[0].name + "</br>"
            var date0 = params[0].data;
            var date1 = params[1].data;
            var date2 = params[2].data;
            var date3  = params[3].data;
            date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
            date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
            date2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate();
            date3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
            res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
            res += params[2].seriesName + "~" + params[3].seriesName + ":</br>" + date2 + "~" + date3 + "</br>"
            return res;
        }
    },
    series: [

        {
            name: '计划开始时间',
            type: 'bar',
            stack: 'stack1',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },
            markline:{
              silent:true
            },
            data: [
                new Date("2018/03/2"),
                new Date("2018/03/5"),
                new Date("2018/03/12"),
                new Date("2018/03/17"),
                new Date("2018/04/01"),
            ]
        },
        {
            name: '计划结束时间',
            type: 'bar',
            stack: 'stack1',
            itemStyle: {
                normal: {
                    color: 'rgb(105, 134, 156)'
                }
            },
            data: [
                new Date("2018/03/5"),
                new Date("2018/03/12"),
                new Date("2018/03/17"),
                new Date("2018/03/30"),
                new Date("2018/04/07"),
            ]
        },
        {
            name: '实际开始时间',
            type: 'bar',
            stack: 'stack2',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [
                new Date("2018/03/2"),
                new Date("2018/03/7"),
                new Date("2018/03/15"),
                new Date("2018/03/20"),
                new Date("2018/04/03"),
            ]
        },
        {
            name: '实际结束时间',
            type: 'bar',
            stack: 'stack2',
            //修改地方3
            itemStyle: {
                normal: {
                    //color: 'rgb(223,155, 78)'
                    color:'#2f4554'
                }
            },
            data: [
                new Date("2018/03/6"),
                new Date("2018/03/15"),
                new Date("2018/03/20"),
                new Date("2018/04/01"),
                new Date("2018/04/8"),
            ]
        }
    ]
};

  myCharts.setOption(option);
</script>


<script type="text/javascript">
  var kglData = [0.36, 0.52, 0.48, 0.36, 0.50, 0.41, 0.44];
  var gzlData = [0.52, 0.48, 0.36, 0.36, 0.41, 0.50, 0.44];
  var dblData = [0.85, 0.92, 0.89, 0.93, 0.94, 0.90, 0.95];

  var myChart = echarts.init(document.getElementById('zbzs_block'))
  option = {
    title:{
      text:'指标走势',
      x:'center',
    },

    legend:{
      top:30,
      data:['开工率', '故障率', '达标率'],
    },

    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },

    series: [
      {
        name:'开工率',
        data: kglData,
        type: 'line'
	  },
      {
        name:'故障率',
        data:gzlData,
        type:'line',
      },
      {
        name:'达标率',
        data:dblData,
        type:'line',
      }
    ]
  };
myChart.setOption(option);




  $("table#aijquery").on("click",function(e){
    $(e.target).parent("tr").addClass("bg-warning").siblings("tr.bg-warning").removeClass("bg-warning");
  });

</script>


<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('cost_bar'));

  var option  = {
    title:{
      text:'成本构成估算'
    },
    xAxis:{
      type:'category',
      data:['打孔', '精加工', '电火花', '试模', '配模'],
    },
    yAxis:{
      type:'value'
    },
    series:[
      {
        type:'bar',
        name:'合格',
        barWidth:20,
        stack:'成本',
        data:[200, 1800, 826, 400, 300]
      },
      {
        type:'bar',
        name:'不合格',
        stack:'成本',
        data:[40, 300, 200, 315, 10]
      }
    ],
  };

  myChart.setOption(option);
</script>

<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('cost_pie'));

  var option  = {
    tooltip:{
      trigger:'item',
      formatter:"{a} <br/>{b}:{c} ({d}%)}",
    },


    series:[
      {
        name: '估算成本',
        type: 'pie',
        radius: ['50%', '70%'],
        center:['40%', '50%'],
        avoidLabelOverlap:false,

        label:{
          normal:{
            show:true,
            position:'inside'
          },
          emphasis:{
            show:true,
            textStyle:{
              fontSize:'18',
              fontWeight:'bold'
            }
          }
        },

        labelLine:{
          normal:{
            show:false
          }
        },

        data:[
          {
            name:'加工成本',
            value: 3526,

          },
          {
            name:'损耗成本',
            value: 865,
          }
        ],
      }
    ]
  };

  myChart.setOption(option);
</script>


<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('event_line'));
  var option  = {
    title:{
      text:'设备事件轴',

    },

    dataZoom:{
      type:'slider',
      top:'60%',
      bottom:'30%',
      dataBackground:{
        lineStyle:{
          width:1.0
        }
      }
    },

    singleAxis:[
      {
        type:'time',
        top:'40%',
        height:0,

        axisLabel:{
          show:false
        } ,
        axisTick:{
          show:false
        },
        axisLine:{
          lineStyle:{
            width:6,
            color:'#EEE9E9'
          }
        }
      }
    ],
    series:[
      {
        type:"scatter",
        singleAxisIndex:0,
        coordinateSystem:'singleAxis',
        symbolSize:16,



        label:{
          normal:{
            show:true,
            color:'#000',
            // offset:[0, -20],
            formatter:function(obj){
              var date  = new Date();
              var time  = new Date().format("hh:mm:ss");
              return   obj.value[1] + '\n\n\n' + date.format("hh:mm:ss");
            }
          },
        },
        data:[
          {
            name:'通知',
            value:[Date.UTC(2019, 3, 10, 10, 20, 0, 0), '任务开始'],
            itemStyle:{
              normal:{
                color:'#4b698d',
                opacity:1
              }
            }
          },
          {
            name:'警告',
            value:[Date.UTC(2019, 3, 18, 10, 20, 0, 0),  '加工时间超出正常值'],
            itemStyle:{
              normal:{
                color:'#e79b37',
                opacity:1,
              }
            }
          },
          {
            name:'异常',
            value:[Date.UTC(2019, 3, 20, 10, 20, 0, 0), '异常停机'],
            itemStyle:{
              normal:{
                color:'#c23531',
                opacity:1,
              }
            }
          },
          {
            name:'通知',
            value:[Date.UTC(2019, 3, 21, 12, 20, 0, 0), '任务开始'],
            itemStyle:{
              normal:{
                color:'#4b698d',
                opacity:1
              }
            }
          },
          {
            name:'通知',
            value:[Date.UTC(2019, 3, 22, 10, 20, 0, 0), '当前任务完成'],
            itemStyle:{
              normal:{
                color:'#4b698d',
                opacity:1
              }
            }
          },

        ]
      }
    ]
  };

  myChart.setOption(option);
</script>


<script type="text/javascript">
  var myChart  = echarts.init(document.getElementById('time_cost'));

  function buildData(){
    var res  = [];


    for(var i = 0; i < 50; i++){
      var record  = [i, 8 + Math.round(Math.random() * 4)];
      res.push(record);
    }

    return res;
  }

  var option  = {
      title:{
        text:'单个加工时间(min)',
      },
      xAxis:{
        type:'value',
        splitLine:{
          show:false
        }
      },
      yAxis:{
        splitLine:{
          show:true
        }
      },
      series:[
        {
          type:'bar',
          data: buildData(),
          barWidth:8,
          label:{
            normal:{
              show:false,
              position:'top'
            },
            emphasis:{
              show:true,
              position:'top'
            }
          }
        }
      ],
  };

  myChart.setOption(option);
</script>


<!-- 定时刷新工作时间 -->
<script type="text/javascript">

  var add  = (function(){
    var counter  = 0;
    return function(){
      return counter += 1;
    }
  })();




  window.setInterval(function(){secondTick()}, 1000);


  function  secondTick(){
    var time  = new Date().format("hh:mm:ss");
    var element  = document.getElementById('work_time');

    element.innerHTML= time;
  }

</script>

</body>
</html>
